import React, { useState, useEffect } from 'react';
import { MenuProps, Breadcrumb, Menu } from 'antd';
import { NavLink, Outlet } from 'react-router-dom'
import { useLocation } from 'react-router'
import { useNavigate } from 'react-router-dom'
import "./Response.scss"
interface props {

}
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}
const items: MenuProps['items'] = [
  getItem('事项管理', 'grp', null,
    [getItem('事项库', '/index/management/Shixiangku'),
    getItem('取消事项库', '/index/management/Quxiao'),
    getItem('事项操作日志', '/index/management/Rizhi'),],
    'group'),
];
const items2: MenuProps['items'] = [
  getItem('互动反馈', 'grp', null, [getItem('咨询管理', '/index/response/Zixun'), getItem('投诉管理', '/index/response/Tousu'), getItem('办事指南评价管理', '/index/response/Guanli'), getItem('办件评价管理', '/index/response/Pingjia'),], 'group'),
];
const items3: MenuProps['items'] = [
  getItem('信息发布', 'grp', null, [getItem('政策法规管理', '/index/Information/Zhengce'),], 'group'),
];
type MenuItem = Required<MenuProps>['items'][number];
function Response(props: props) {
  var navigate = useNavigate()
  const location = useLocation()
  const { pathname } = useLocation()
  var r = location.pathname.split("/")
  const onClick: MenuProps['onClick'] = (e) => {
    navigate(e.key)
    pathroute(e.key)
  }
  // 面包屑数据
  var [mbxitem, setMbxitem] = useState(['首页']);
  // 封装刷新不丢失方法
  var pathroute = (pa: any) => {
    if (pathname == '/index/management/Shixiangku') {
      setMbxitem(['工作台', '事项管理','事项库'])
    }
    if (pa == '/index/management/Shixiangku') {
      setMbxitem(['工作台', '事项管理', '事项库'])
    }
    if (pa == '/index/management/Quxiao') {
      setMbxitem(['工作台', '事项管理', '取消事项库'])
    }
    if (pa == '/index/management/Rizhi') {
      setMbxitem(['工作台', '事项管理', '事项操作日志'])
    }
    if (pathname == '/index/response/Zixun') {
      setMbxitem(['工作台', '互动反馈','咨询管理'])
    }
    if (pa == '/index/response/Zixun') {
      setMbxitem(['工作台', '互动反馈', '咨询管理'])
    }
    if (pa == '/index/response/Tousu') {
      setMbxitem(['工作台', '互动反馈', '投诉管理'])
    }
    if (pa == '/index/response/Guanli') {
      setMbxitem(['工作台', '互动反馈', '办事指南评价管理'])
    }
    if (pa == '/index/response/Pingjia') {
      setMbxitem(['工作台', '互动反馈', '办件评价管理'])
    }
    if (pa == '/index/Information/Zhengce') {
      setMbxitem(['工作台', '信息发布', '政策法规管理'])
    }
  }
  useEffect(() => {
    if (location.state !== null) {
      setMbxitem(location.state)
    }
  }, [pathname]);
  return (
    <div className='cebianlan'>
      <Menu
        onClick={onClick}
        style={{ width: 256 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        items={r[1] == "index" && r[2] == "response" ? items2 : (r[1] == "index" && r[2] == "management" ? items : items3)}
      />
      <div className='mbx'>
        <Breadcrumb>
          <Breadcrumb.Item>{mbxitem[0]}</Breadcrumb.Item>
          <Breadcrumb.Item>
            <NavLink to='/index'>{mbxitem[1]}</NavLink>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <NavLink to="/index">{mbxitem[2]}</NavLink>
          </Breadcrumb.Item>
        </Breadcrumb>
        <Outlet />
      </div>
    </div>
  )
}

export default Response;